var Drumblr = {
	init : function(){

		this.mid_height = 0;
		this.detail = $('#detail');
			
		this._bindEvent();
		
		//static widget initiate here
		Drumblr.PostFilter.init();
		
		$(window).trigger('resize');		
	},
	_bindEvent : function (){
		//dynamically change mid height
		$(window).resize(this._resizeContainer.bind(this));
		
		//toggle bars
		$("#listings li").click( function(){
			if (!$(this).hasClass("selected")) {
				$("#listings li").removeClass("selected");
				$(this).addClass("selected");
				$("#details-content").html("<div class='ajax-loader'><p>Loading your idea</p><img src='http://drumblr.guavamob.com/wp-content/themes/drumblr/css/images/ajax-loader.gif' alt='' /></div>");
				$("#details").show();
				var jsdata = $.parseJSON($(".content #js-data script").html());
				$.get(jsdata.ajax_url , {id : $(this).attr('id').substr(5)} ,function(data) {
					$("#details-content").html(data);
					Drumblr._bindDetailsEvent(); //bind new DOM object
				});
			}
			else {
				$(this).removeClass("selected");
				$("#details").hide();
			}
		});
	},
	_resizeContainer : function (){
		//dynamically change mid height
		this.mid_height = $('div#wrapper').height() - $('header#top-header').height() - $('footer#bottom-footer').height();
		
		console.log('mid height:'+this.mid_height);
		
		$('section#holder').height(this.mid_height);
		$('div.inner').height(this.mid_height);
		$('section.content').height(this.mid_height);
		
		this.details_height = Math.max($('div#listings').height(),this.mid_height);
		$('aside#details').height(this.details_height);
		$('div.details-inner').height(this.details_height);
			$('div#details-content').height(this.mid_height - 56); //padding 
	},	
	_bindDetailsEvent : function(){
		//close details
		$("#detail-close").click(function(){
			$("#listings li").removeClass("selected");
			$("#details").hide();
		}); 
		
		//expand details
		$(".detail-size").click( function(){
			if($(this).hasClass("detail-expend")) {
				$("#details").css("width", "500px");
				$("#details-content").css("width", "444px");
				$(this).removeClass("detail-expend");
				$(this).addClass("detail-shrank");
			} 
			else {
				$("#details").css("width", "350px");
				$("#details-content").css("width", "294px");
				$(this).removeClass("detail-shrank");
				$(this).addClass("detail-expend");
			}
		});
	}
}



